<template>
	<view>
		<view class="order-top">
			<view class="" v-for="(item,index) in orderlist" :key="index" @click="selecttop(index)">
				<view class="top-item" :class="topindex === index ? 'top-itemclor' : ''">
					{{item.name}}
				</view>
			</view>
		</view>
		<template v-if="topindex === 0" >
			<comorderlist :orderlist='this.getstate'></comorderlist>
			<template v-if="this.getstate.length === 0 ">
				<view class="allorder">
					<view class="order">
						<view class="top">
							暂无相关订单数据
						</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else-if ="topindex === 1">
			
			<comorderlist :orderlist='this.getstate_1'></comorderlist>
			<template v-if="this.getstate_1.length === 0 ">
				<view class="allorder">
					<view class="order">
						<view class="top">
							暂无相关订单数据
						</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else-if = "topindex === 2">
			<comorderlist :orderlist='this.getstate_0'></comorderlist>
			<template v-if="this.getstate_0.length === 0 ">
				<view class="allorder">
					<view class="order">
						<view class="top">
							暂无相关订单数据
						</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else>
			<!-- //评价模块的判定 -->
			<comorderlist :orderlist='this.getmark'></comorderlist>
			<template v-if="this.getmark.length === 0 ">
				<view class="allorder">
					<view class="order">
						<view class="top">
							暂无相关订单数据
						</view>
					</view>
				</view>
			</template>
		</template>
		<!-- <template v-if="orderlist[topindex].list.length >0">
			<comorderlist :orderlist='orderlist[topindex].list'></comorderlist>
			
		</template> -->
		
	</view>
</template>
<script>
	import comorderlist from '@/components/order/order-list.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				topindex: 0,
				orderdata:[],
				orderlist: [
					{name: "全部",
					list:[],
					},
					{
						name: "已支付",
						list:[]
					},
					{
						name: "待支付",
						list: []
					},

					{
						name: "待评价",
						list: []
					},
				]
			}
		},
		methods: {
			selecttop(index) {
				this.topindex = index
			},
			getorderdata(){
				$http.request({
					url: "/orderdata",
					method:"POST",
					header:{
						token:true
					},
				}).then((res) => {
					this.orderdata = res;
					this.orderdata = this.orderdata.reverse();
				}).catch(() => {
					uni.showToast({
						title: "获取orderdata失败..",
						icon: "error",
						mask: true,
						duration: 2000,
						
					})
					
				})
			},
			getmycheckstate(){
				$http.request({
					url: "/",
					method:"POST",
					header:{
						token:true
					},
				}).then((res) => {
					
				}).catch(() => {
					uni.showToast({
						title: "获取失败.",
						icon: "error",
						mask: true,
						duration: 2000,
					})
					
				})
			}
		},
		components: {
			comorderlist
		},
		onShow() {
			this.getorderdata();
		},
		computed:{
			getstate(){
				return this.orderdata
			},
			getstate_0(){
				return this.orderdata.filter(v=>v.state === 0)
			},
			getstate_1(){
				return this.orderdata.filter(v=>v.state === 1)
			},
			getmark(){
				return this.orderdata.filter(v=>{v.ismark !== '1'; v.state === 1})
			}
		}
	}
</script>

<style lang="scss">
	.order-top {
		display: flex;
		justify-content: space-around;
		padding: 10rpx;

		.top-itemclor {

			border-bottom: 5rpx solid #42B7FB;
		}

	}

	.order-content {
		.buy {
			padding: 10rpx 30rpx;
			color: #42B7FB;
			display: flex;
			justify-content: end;
		}

		.all {
			display: flex;
			background-color: #f6f6f6;
			justify-content: space-between;

			.leftimg {
				width: 180rpx;
				height: 180rpx;
			}

			.content {
				width: 450rpx;

				.color {
					color: #cccccc;
				}

				.free {
					color: #42B7FB;
				}
			}

			.pnall {
				.prinum {

					padding: 10rpx 20rpx;

					.pri {
						font-weight: 800;
					}

					.num {
						display: flex;
						justify-content: end;
						color: #cecece;
					}
				}
			}

		}

	}

	.allorder {
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.order {

			.top {
				padding: 10rpx;
			}

			.obottom {
				color: #42B7FB;
				border: 1rpx solid #42B7FB;
				border-radius: 30rpx;
				padding: 10rpx 30rpx;
			}
		}

	}
</style>